<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间倒数</title>
</head>

<body>
    <div id="show"></div>
    <script>
        // 规定一个在计算机的本地时间之前的时间
        // preDate > newDate 为倒计
        // preDate < newDate 为计时
        var preDate = new Date('2020-06-20 09:52:00');
        var newDate = new Date();
        
        var res = chaTime(preDate,newDate)
        show.innerHTML = res;

        var Timer = setInterval(function(){
            // 每执行一次，就获取一次时间
            newDate = new Date();
            var res = chaTime(preDate, newDate)
            show.innerHTML = res;

             // 清除定时器
             if(preDate <= newDate){
                clearInterval(Timer)
            }

        },1000)


        // 计算时间差
        function chaTime(preDate, newDate) {
            // 获取格林威治时间的毫秒数
            var timer1 = preDate.getTime();
            var timer2 = newDate.getTime();
            // 两个时间之间的时间差
            var cha = Math.abs(timer1 - timer2);

            // 通过毫秒数 换算 天数 小时 分钟 秒
            // 天数
            var d = parseInt(cha / 1000 / 60 / 60 / 24);
            // 小时
            var h = parseInt((cha / 1000 / 60 / 60) % 24)
            // 分钟
            var m = parseInt((cha / 1000 / 60) % 60)
            // 秒
            var s = parseInt((cha / 1000) % 60)

            return '相差'+d+'天'+h+'时'+m+'分'+s+'秒'
        }
    </script>
</body>

</html>